Автор: Lazy Layman
e-mail: lazylay@windoms.sitek.net
homepage: http://windoms.sitek.net/~lazylay
Данный скрипт позволяет организовать на
странице просмотр картинок. При щелчке
"мышью" на миниатюре открывается новое окно
с полноформатным изображением. URL картинок и
размер окон описывается в массивах. Размеры
массивов (т.е. количество картинок в галерее)
могут быть любыми. В массив imgLib
заносятся URL картинок, в imgWidth - ширина
окна, а в imgHeight - высота окна. Ширина окна
должна быть приблизительно на 15-20, а высота - на
20-25 пикселей больше реального размера картинки.
Внимание! Скрипт необходимо
поместить в заголовке страницы между тэгами
<HEAD> и </HEAD>, а графические ссылки - между
тэгами <BODY> и <BODY>. Кроме того, строка "var
paramWnd=...", описывающая параметры окна НЕ
ДОЛЖНА содержать пробелов до и после запятых (в
противном случае скрипт перестаёт работать в
Netscape Navigator/Communicator).
Если есть вопросы - пишите.
ЛИСТИНГ: |
<script language="JavaScript"> <!-- Start Hiding from older browsers // Массив ссылок на картинки imgLib=new Array(4); imgLib[0]="img-big1.jpg"; imgLib[1]="img-big2.jpg"; imgLib[2]="img-big3.jpg"; imgLib[3]="img-big4.jpg"; // Массив ширин картинок imgWidth=new Array(4); imgWidth[0]=320; imgWidth[1]=320; imgWidth[2]=320; imgWidth[3]=340; // Массив высот картинок imgHeight=new Array(4); imgHeight[0]=316; imgHeight[1]=325; imgHeight[2]=332; imgHeight[3]=345; // Функция задания параметров нового окна function setWH(ndx){ var paramWnd="%22 width="+imgWidth[ndx]+",height="+imgHeight[ndx]+",copyhistory=no,directories=no,menubar=no,resizable=yes,status=no,tollbar=no,scrollbars=no %22" return(paramWnd) } // Функция показа картинки function showImage(ndx) { var tmp; tmp=setWH(ndx); imageWindow=window.open(imgLib[ndx],ndx,tmp); } // End hiding --> </script>
|
<!-- Графические ссылки на
полноформатные изображения в теле страницы. //
--> <a href="javascript:showImage(0)" onMouseOver="window.status='Посмотреть рисунок'; return true;" onMouseOut="window.status=' '; return true;"><img src="img-sm1.jpg" width="100" height="97" alt="Посмотреть рисунок" border="0"></a> <br> <a href="javascript:showImage(1)" onMouseOver="window.status='Посмотреть рисунок'; return true;" onMouseOut="window.status=' '; return true;"><img src="img-sm2.jpg" width="100" height="100" alt="Посмотреть рисунок" border="0"></a> <br> <a href="javascript:showImage(2)" onMouseOver="window.status='Посмотреть рисунок'; return true;" onMouseOut="window.status=' '; return true;"><img src="img-sm3.jpg" width="100" height="102" alt="Посмотреть рисунок" border="0"></a> <br> <a href="javascript:showImage(3)" onMouseOver="window.status='Посмотреть рисунок'; return true;" onMouseOut="window.status=' '; return true;"><img src="img-sm4.jpg" width="100" height="100" alt="Посмотреть рисунок" border="0"></a>
|